<!DOCTYPE html>
<html>
<head>
<script src="three.js"></script>
<script src="helvetiker.js"></script>
<script src="makeObjects.js"></script>
<script type="text/javascript">
    var camera, scene, renderer;
    var atcg;
    var pointerDetectRay, projector, mouse2D;
    var dragged = false;
    var draggedObject;
    var overObject;

    var positions;

    var lastMouseX = -1;
    var lastMouseY = -1;

    var letters = [ 'A', 'T', 'C', 'G' ];

    //POSITIONS
    var ATCG_POS_X = -430;
    var ATCG_POS_Y = -200;

    var PAS_POS_X = -20;
    var PAS_POS_Y = 0;

    var PAS2_POS_X = 280;
    var PAS2_POS_Y = 0;

    var CHAIN_POS_X = 500;
    var CHAIN_POS_Y = -100;

    var WELCOME_POS_X = -300;
    var WELCOME_POS_Y = 0;

    function init() {

        camera = new THREE.PerspectiveCamera(75, window.innerWidth
                / window.innerHeight, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();

        //makeAtcgBar();
        makeDNAChain();
        //makeDNAPas();
        //makeDNAPas2();
        makeWelcomePage();

        renderer = new THREE.WebGLRenderer({
            antialiasing : true
        });

        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.setClearColorHex(0xEEEEEE, 1.0);
        renderer.clear();

        document.body.appendChild(renderer.domElement);

        pointerDetectRay = new THREE.Raycaster();
        pointerDetectRay.ray.direction.set(0, -1, 0);
        projector = new THREE.Projector();
        mouse2D = new THREE.Vector3(0, 0, 0);

        //document.addEventListener("click", mouseClick);
        document.addEventListener("mousemove", mouseMove);
        document.addEventListener("mousedown", mouseDown);
        document.addEventListener("mouseup", mouseUp);

    }

function makeWelcomePage() {

        var welcome = new THREE.Object3D();

        //plane
        var cubesPlaneGeometry = new THREE.PlaneGeometry(800, 500, 1, 0);
        var cubesPlaneMaterial = new THREE.MeshBasicMaterial({
            color : Math.random()*0x0000ff,
            wireframe : false
        });

        textMaterial = new THREE.MeshBasicMaterial({
            color : 0x0000ff,
            wireframe : false
        });

        positions = new Array();

            var textGeo = new THREE.TextGeometry("Welcome", {
                size : 100,
                height : 20,
                face : "helvetiker"
            });
            textGeo.computeBoundingBox();

            var textMesh = new THREE.Mesh(textGeo, textMaterial.clone());
            textMesh.position.x = -40;
            textMesh.position.y = -40;



            //node for cube & mesh
            var node = new THREE.Object3D();
            node.add(textMesh);

            node.position.x = 10;
            node.position.y = 20;

            //positions[i] = new THREE.Vector3(node.position.x, node.position.y, 0);

            welcome.add(node); //adding to welcome



        welcome.position.x =WELCOME_POS_X;
        welcome.position.y = WELCOME_POS_Y;
        welcome.position.z = 100;

        scene.add(welcome); //adding welcome to the scene
    }

    //var spheres = Array[100];

    //var dnachain;





    var animatedCubes = 0; //pocet vytvorenych kostek
    var finishedCubes = 0


    function animate(t) {
/*
        if(animatedCubes == 0){
            for(var i = 1; i<= 5; i++){
                pas2.children[i].position.y += 1500;
            }
        }*/
/*
        if( t > animatedCubes * 1000 + 500 ){
            animatedCubes++;
        }

        for(var i = finishedCubes +1; i<= Math.min(animatedCubes, 5); i++){
            pas2.children[i].position.y -= 3;
        }

        var j = Math.min(finishedCubes +2, 5);
        if(pas2.children[j].position.y <= j* 200 - 400){
            finishedCubes++;
        }*/

        //animation of dragged object
        if (dragged) {
            draggedObject.position.z = Math.sin(t * 0.005) * 40 + 20;
        } else if(overObject != null){
            overObject.children[0].material.color.setHex(0x0000aa);
            overObject.children[1].material.color.setHex(0x0000aa);
        }

        if(movingObject != null){
            if(movingObject.position.distanceTo(desiredPosition) > 5){

            }
        }

        dnachain.rotateY(0.01);

        pointerDetectRay = projector.pickingRay(mouse2D.clone(), camera);

        timer = t * 0.003;

        requestAnimationFrame(animate);
        //textCubeNode.position.y = Math.cos(timer)*Math.cos(timer) * 10;

        //atcg.rotation.x +=  0.02;
        //atcg.rotation.y +=  0.03;
        //textCubeNode.rotation.y =  0.2;

        renderer.render(scene, camera);
        //window.requestAnimationFrame(animate, renderer.domElement);

    }


    function mouseUp(event){

        location.replace("game2.html");

            dragged = false;
            draggedObject.position.z = 0;
            //move(draggedObject, positions[0]);


            var cubes = pas2.children;

            for(var i = 1; i< 6; i++){
                var pos = cubes[i].position.clone();
                pos.add(pas2.position);
                pos.x -= 200;

                if(draggedObject.position.distanceTo(pos) < 200){
                    draggedObject.position = pos;
                }
            }


            draggedObject = null;

    }








    function mouseDown(event){
     event.preventDefault();
            mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;

            var intersects = pointerDetectRay.intersectObjects(atcg.children, true);
            if (intersects.length > 0 && intersects[0].object != atcg.children[0]) {
                //draggedObject = intersects[0].object.parent;
                var obj = intersects[0].object.parent;
                draggedObject = new THREE.Object3D();
                draggedObject.add(obj.children[0].clone());
                draggedObject.add(obj.children[1].clone());
                draggedObject.position = obj.position.clone();
                draggedObject.position.x +=ATCG_POS_X;
                draggedObject.position.y +=ATCG_POS_Y;


                scene.add(draggedObject);

                lastMouseX = -1;
                lastMouseY = -1;
                dragged = true;
        }
    }


    //mouseClick
    function mouseClick(event){
        if (dragged) {
            dragged = false;
            draggedObject.position.z = 0;
            //move(draggedObject, positions[0]);
            draggedObject = null;
        } else {
            event.preventDefault();
            mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;

            var intersects = pointerDetectRay.intersectObjects(atcg.children, true);
            if (intersects.length > 0 && intersects[0].object != atcg.children[0]) {
                //draggedObject = intersects[0].object.parent;
                var obj = intersects[0].object.parent;
                draggedObject = new THREE.Object3D();
                draggedObject.add(obj.children[0].clone());
                draggedObject.add(obj.children[1].clone());
                draggedObject.position = obj.position.clone();
                draggedObject.position.x +=ATCG_POS_X;
                draggedObject.position.y +=ATCG_POS_Y;


                scene.add(draggedObject);

                lastMouseX = -1;
                lastMouseY = -1;
                dragged = true;
            }
        }
    }

    //mouseMove
    function mouseMove(event){
        mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;

        var q = 200;
        if (dragged) {

            var dX = 0;
            var dY = 0;

            if (lastMouseX == -1 && lastMouseY == -1) {
                lastMouseX = mouse2D.x;
                lastMouseY = mouse2D.y;
            }

            dX = mouse2D.x - lastMouseX;
            dY = mouse2D.y - lastMouseY;

            draggedObject.position.x += dX * window.innerWidth;
            draggedObject.position.y += dY * window.innerHeight;

            lastMouseX = mouse2D.x;
            lastMouseY = mouse2D.y;
        } else {
            var intersects = pointerDetectRay.intersectObjects(
                    atcg.children, true);
            if (intersects.length > 0 && intersects[0].object != atcg.children[0]) {
                overObject = intersects[0].object.parent;
            } else {
                overObject.children[0].material.color.setHex(0x0000ff);
                overObject.children[1].material.color.setHex(0x0000ff);
                overObject = null;
            }
        }
    }

    var movingObject;
    var desiredPosition;

    //move - moving specified object to desired position
    function move(object, target){
        movingObject = object;
        desiredPosition = target;
        object.position = target.clone();
    }


</script>
</head>
<body>
    <script>
        init();
        animate(new Date().getTime());
    </script>
</body>
</html>
